<template>
    <view class="cForm">
        <view v-if="historylist.length==0" class="page_dcenter_null">
            <img class="page_dcenter_null_img" src="../../../static/img_null_bookbuilding.png" />
            <view>暂无记录</view>
        </view>
        <div v-else>
            <div class="cForm_t">
                <div class="cForm_tli">日期</div>
                <div class="cForm_tli">收缩压/舒张压</div>
                <div class="cForm_tli">脉率</div>
                <div class="cForm_tli">平均动脉压</div>
                <div class="cForm_tli">脉压差</div>
            </div>
            <scroll-view scroll-y class="pagses">
                <div class="fm_top" v-for="(item, index) in historylist" :key="index">
                    <div class="fm_top_li">{{item.monitorTime}}</div>
                    <div class="fm_top_li">
                        {{item.highValues}}/
                        <span class="red">{{item.lowValues}}</span>
                    </div>
                    <div
                        class="fm_top_li"
                        :class="item.pulseRateIsNormal?'':'red'"
                    >{{item.pulseRate||'/'}}</div>
                    <div
                        class="fm_top_li"
                        :class="item.arteryAvgIsNormal?'':'red'"
                    >{{item.arteryAvg||'/'}}</div>
                    <div
                        class="fm_top_li"
                        :class="item.pulsePressureIsNormal?'':'red'"
                    >{{item.pulsePressure||'/'}}</div>
                </div>
            </scroll-view>
        </div>
    </view>
</template>
<script>
export default {
    data() {
        return {
            historylist: null,
            dataList: [],
        };
    },
    mounted() {
        var _this = this;
        _this.getList();
    },
    methods: {
        getList() {
            var _this = this;
            _this.$ajaxs
                .get("/mobile/v1/monitor/getChartForm", {
                    monitorTypeId: "316189802716475392",
                })
                .then((res) => {
                    if (res.status == 200) {
                        _this.historylist = res.content;
                    } else {
                        uni.showToast({
                            title: "请检查网络~",
                            icon: "none",
                        });
                    }
                })
                .catch((err) => reject(err));
        },
    },
};
</script>

<style scoped lang="scss">
.cForm {
    height: calc(100% - 188upx);
    .cForm_t {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        .cForm_tli {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
            text-align: center;
            font-size: 20upx;
            background: #ffe0ec;
            padding: 10upx 0;
        }
        .cForm_tli:nth-of-type(1) {
            -webkit-box-flex: 0 0 25%;
            -ms-flex: 0 0 25%;
            flex: 0 0 25%;
        }
        .cForm_tli + .cForm_tli {
            border-left: 1px solid #fff;
        }
    }
    .page_dcenter_null {
        padding-top: 180upx;
        text-align: center;
        .page_dcenter_null_img {
            height: 180upx;
            width: 162upx;
        }
    }
    .pagses {
        height: 100%;
        .fm_top {
            border-top: 1px solid #ddd;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            .fm_top_li {
                -webkit-box-flex: 1;
                -ms-flex: 1;
                flex: 1;
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                align-items: center;
                justify-content: center;
                vertical-align: middle;
                text-align: center;
                background: #fff;
                font-size: 20upx;
                padding: 10upx 0;
                div {
                    -webkit-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                }
                div:nth-of-type(2) {
                    border-left: 1px solid #ddd;
                }
            }
            .red {
                color: #fa4d93;
            }
            .fm_top_li:nth-of-type(1) {
                -webkit-box-flex: 0 0 25%;
                -ms-flex: 0 0 25%;
                flex: 0 0 25%;
            }
            .fm_top_li + .fm_top_li {
                border-left: 1px solid #ddd;
            }
        }
    }
}
</style>